
/*	CSS-Framework

	Version		: 0.21
	File name	: cssf-base.css
	Description	: Styles for webdewelopers
	Author		: Aleksej Romanovskij (http://css-framework.ru)
	
------------------------------ */

/* Utilites
------------------------------ */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
	position:relative;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}


/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

sup {
	top:-0.4em;
}

sup, sub {
	position:relative;
	vertical-align:baseline;
}

/*	Tables
	tables still need 'cellspacing="0"' in the markup
------------------------------ */
table {	border-spacing: 0;	table-layout:fixed;	border-collapse: collapse; }
table th, table td { vertical-align: middle; }
table th { background: #f4f4f4; }


.hidden { display: none!important; }
.show { display: block!important; }
.no-margin { margin: 0!important; }
.no-padding { padding: 0!important; }
.no-bg { background: none!important; }
.no-border, img { border: none!important; }
.no-float { float:none; }
.no-wrap { white-space:nowrap; }

.clearfloat:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
.clear-right { clear:right; }

.weak {color:#666666; font-weight:normal; }
.white {color:#FFF; }
.black {color:#000; }

.container { overflow: hidden; }
.img-repl { text-indent: -9999px; overflow: hidden; display: block; }
.img-icon { vertical-align:middle; }


/* Main custom rules
------------------------------ */
@font-face { font-family: Aero; src: url('../fonts/Aero.ttf'); } 

body, html { background:#222222 url(../images/app_bg.png); position:relative; height:100%; color:#ccc; }
body { padding: 0; margin:0; font: .75em/1.5 Tahoma , Arial, Helvetica, sans-serif; }

body.draw *,
body.drag-select * { cursor:crosshair!important; }
body.drag * { cursor:move!important; }


a { color: #FFF; cursor:pointer; }
a span { cursor:pointer; }
a:visited {  }
a:hover { text-decoration:none; color:#c33; }
a:active {  }


.ajax-link { text-decoration:none; border-bottom:1px dashed #CCC;  cursor: pointer; }
.ajax-link:hover { background-image:none; border: none; }

/* Fonts preferences 
------------------------------ */
.f-9 {font-size:0.7em; }
.f-10 {font-size:0.8em; }
.f-11 {font-size:0.9em; }
.f-12 {font-size:1em; }
.f-13 {font-size:1.1em; }
.f-14 {font-size:1.2em; }
.f-18 {font-size:1.5em; }
.f-24 {font-size:2em; }

.f-italic { font-style:italic; }
.f-strong { font-weight:bold; }

.v-middle { vertical-align:middle; }
.v-top { vertical-align:top; }
.v-baseline { vertical-align:baseline; }

/* Colors prefrerences
------------------------------ */
.white { color:#FFFFFF!important; }
.black { color:#000!important; }

.orange { color:#CC6600!important; }
.dark { color:#333333!important;}
.light { color:#666666!important; }
.green { color:#669900!important; }
.red { color:#990000!important; }


/* Margins
------------------------------ */
.m-5 { margin:5px; }
.m-10 { margin:10px; }
.m-15 { margin:15px; }
.m-20 { margin:20px; }

.mt-5 { margin-top:5px; }
.mt-10 { margin-top:10px; }
.mt-15 { margin-top:15px; }
.mt-20 { margin-top:20px; }

.mb-5 { margin-bottom:5px; }
.mb-10 { margin-bottom:10px; }
.mb-15 { margin-bottom:15px; }
.mb-20 { margin-bottom:20px; }

.mr-5 { margin-right:5px; }
.mr-10 { margin-right:10px; }
.mr-15 { margin-right:15px; }
.mr-20 { margin-right:20px; }

.ml-5 { margin-left:5px; }
.ml-10 { margin-left:10px; }
.ml-15 { margin-left:15px; }
.ml-20 { margin-left:20px; }

/* Paddings
------------------------------ */
.p-5 { padding:5px; }
.p-10 { padding:10px; }
.p-15 { padding:15px; }
.p-20 { padding:20px; }

.pt-5 { padding-top:5px; }
.pt-10 { padding-top:10px; }
.pt-15 { padding-top:15px; }
.pt-20 { padding-top:20px; }

.pb-5 { padding-bottom:5px; }
.pb-10 { padding-bottom:10px; }
.pb-15 { padding-bottom:15px; }
.pb-20 { padding-bottom:20px; }

.pr-5 { padding-right:5px; }
.pr-10 { padding-right:10px; }
.pr-15 { padding-right:15px; }
.pr-20 { padding-right:20px; }

.pl-5 { padding-left:5px; }
.pl-10 { padding-left:10px; }
.pl-15 { padding-left:15px; }
.pl-20 { padding-left:20px; }


/* Display settings
------------------------------ */
.d-block { display:block; }
.d-inline { display:inline; }
.d-iblock { display:inline-block; *display:inline; zoom: 100%; }


/* Content elements
------------------------------ */
h1, h2, h3, h4 { font-size: 2em; margin-bottom: .5em;  font-weight: normal; color:#FFF; }
h2 { font-size: 1.7em;}
h3 { font-size: 1.5em; }
h4 { font-size: 1.2em; font-weight: bold; }

p { margin-bottom:1em; }

blockquote { margin-left: 0; padding-left: 2em; border-left: 3px solid #ccc; margin-bottom:1em; }
pre, code { font: 1.2em/1.8 "Courier New", Courier, monospace; border: 1px dashed #aaa; padding: 1em; background: #eee; }
code { padding: .2em .5em; }

/*
.content ul, .content ol { margin-left: 3em; line-height: 1.3em; }
.content ul li, .content ol li { margin-bottom: .2em; } 
.icons a, .icon { padding-left: 20px; background-repeat: no-repeat; background-position: left center; }
*/

.text-content p, .text-content ul, .text-content ol, text-content, pre, { margin-bottom: 1em; }
.text-content ul, .text-content ol { margin-left:2em; }

.text-content ul li, .text-content ol li { margin-bottom:0.5em; }

.text-content ul { list-style:disc; color:#c33; }
.text-content ul li span { color:#333333; }

.text-content ol,
ol.numeric { list-style-type:decimal; margin-left:2em; }

ul.inline-list li { display:inline; margin:0 1em 0 0; }

/*	Columns
------------------------------ */

.columns { width: 100%; overflow: hidden; }
.w-5, .w-10, .w-15, .w-20, .w-25, .w-30, .w-35, .w-40, .w-45, .w-50, .w-55, .w-60, .w-65, .w-70, .w-75, .w-80, .w-85, .w-90, .w-95, .w-100, .w-33, .w-66, .w-38, .w-62 { float: left;  }

.col-content { padding: 0 6px; }
.col-first { padding-left: 0!important; }
.col-last { padding-right: 0!important; }

.w-5 { width: 5%!important; }
.w-10 { width: 10%!important; }
.w-15 { width: 15%!important; }
.w-20 { width: 20%!important; }
.w-25 { width: 25%!important; }
.w-30 { width: 30%!important; }
.w-35 { width: 35%!important; }
.w-40 { width: 40%!important; }
.w-45 { width: 45%!important; }
.w-50 { width: 50%!important; }
.w-55 { width: 55%!important; }
.w-60 { width: 60%!important; }
.w-65 { width: 65%!important; }
.w-70 { width: 70%!important; }
.w-75 { width: 75%!important; }
.w-80 { width: 80%!important; }
.w-85 { width: 85%!important; }
.w-90 { width: 90%!important; }
.w-95 { width: 95%!important; }
.w-100 { width: 100%!important; }

.w-33 { width: 33%; }
.w-66 { width: 66%; }

.w-38 { width: 38%; }
.w-62 { width: 62%; }

/* Text align & Float
------------------------------ */
.a-left { text-align: left; }
.a-center { text-align: center; }
.a-right { text-align: right; }

.f-left { float: left !important; zoom: 100%; }
.f-right { float: right !important; zoom: 100%; }

.rbox-3 { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.rbox-5 { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.rbox-8 { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
.rbox-10 { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }

/* Inputs
------------------------------ */
input { vertical-align: middle }
input, textarea, select { font-family: Tahoma, Arial, Helvetica, sans-serif; font-size:1em; }

button {
	padding:0 20px;

	color:#FFF;
	color:rgba(255,255,255,0.8);
	
	border:0 none;
	border-color:#2884c0 transparent transparent transparent;
	border-width:1px 0 0 0;
	
	
	vertical-align:middle;
	
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
	-webkit-box-shadow: rgba(0,0,0,0.75)  0px 1px 2px;

	background:#106396 url(../images/button_normal.png) repeat-x;	
	-background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(7,80,129)), color-stop(1, rgb(10,113,181)) );
	-background: -moz-linear-gradient( center bottom, rgb(7,80,129) 0%,  rgb(10,113,181) 100% );
	
	cursor: pointer;
}

button span { 
	display: block;
	line-height:16px;
	padding: 5px 0;
}
button:hover, button:focus  {
	color: #FFF; 
	background-position:0 -50px;
	-border-top-color: #2dc3ff;
	-background: -webkit-gradient( linear, left bottom, left top,  color-stop(0, rgb(7,80,129)), color-stop(1, rgb(16,179,255)) );
	-background: -moz-linear-gradient( center bottom, rgb(7,80,129) 0%,  rgb(16,179,255) 100% );
	
}

button:active {
	background-position:0 -100px;
	-background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(10,113,181)), color-stop(1, rgb(7,80,129)) );
	-background: -moz-linear-gradient( center bottom, rgb(10,113,181) 0%,  rgb(7,80,129) 100% );
}

button.button-main {
	background-color:#d43434;
	background-image: url(../images/button_main.png);	
	-border-top-color: #d74444;
	-background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(154,0,0)), color-stop(1, rgb(200,0,0)) );
	-background: -moz-linear-gradient( center bottom, #9a0000 0%, #c80000 100%);
}

button.button-main:hover,
button.button-main:focus {
	-border-top-color: #f55959;
	-background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(154,0,0)), color-stop(0.85, rgb(255,116,116)) );
	-background: -moz-linear-gradient( center bottom, #9a0000 0%, #eb2a2a 100%);
}

button.button-main:active {
	-border-top-color: #902727;
	-background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,116,116)), color-stop(1, rgb(154,0,0)) );
	-background: -moz-linear-gradient( center bottom, #eb2a2a 0%,  #9a0000 100% );
}

button.button-small { font-size:0.8em; padding:0 15px; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px;}
button.button-small span { padding:3px 0; }

button.button-big { font-size:1.5em; padding:8px 20px 9px; -moz-border-radius: 21px; -webkit-border-radius: 21px; border-radius: 21px;}
button.button-big span { line-height:23px; }
button.button-big span.w-icon {margin-left:-5px; background-position: 0 50%; }

button span.w-icon { padding-left: 24px; margin-left:-10px; background-repeat:no-repeat; background-position:0 50%;  }
button span.plus { background-image:url(../images/btn_ico_plus.png); }
button span.download { background-image:url(../images/btn_ico_download.png); }
button span.trash { background-image:url(../images/btn_ico_trash.png); }
button span.load { background-image:url(../images/btn_ico_load.png); }

button.button-icon { padding-left: 7px; padding-right:7px; }
button.button-icon span.w-icon { padding:0px; width:16px; overflow:hidden; margin:0; text-indent:-10000px;}

button:disabled {
	background:#CCC!important; color:#666!important; border-color:transparent!important;
}

input[type="text"], select {
	border:1px solid;
	border-color:#CCCCCC #FFF #FFF #CCC;
	padding:2px;
	line-height:1;
	margin: 0;
}

select { padding:2px; }
option { padding-left:3px; }
optgroup { font:inherit; font-style:normal; font-weight:bold; padding-left:3px; }
optgroup > option { padding-left:10px; }

input[type="text"]:focus {}

input[type="checkbox"]{
	border: 0 none;
	width:16px;
	height:16px;
}

/* Forms
------------------------------ */



.app-form .control-header { background:#161616 repeat-x; -border-top: 1px solid #3d3d3d; border-bottom:1px solid #111; }
.app-form .control-header .header-wrap { padding:15px; padding-left:70px; padding-top: 13px; background-position: 20px 50%; background-repeat: no-repeat; }
.app-form .control-header .item-type { font-size:0.8em; text-transform:uppercase; color:#999999; }
.app-form .control-header .item-name { font-size:1.5em; color:#FFF; line-height:0.750em; }

.-control-header .lib-element-health { background-image: url(../images/icons/create_health.png); }
.-control-header .lib-element-armor { background-image: url(../images/icons/create_armor.png); }
.-control-header .lib-element-ammo { background-image: url(../images/icons/create_ammo.png); }
.-control-header .lib-element-ctf-powerup { background-image: url(../images/icons/create_ctf_powerup.png); }
.-control-header .lib-element-obit { background-image: url(../images/icons/create_obit.png); }
.-control-header .lib-element-player-item { background-image: url(../images/icons/create_player_item.png); }
.-control-header .lib-element-powerup { background-image: url(../images/icons/create_powerup.png); }
.-control-header .lib-element-scorebox { background-image: url(../images/icons/create_scorebox.png); }
.-control-header .lib-element-timer { background-image: url(../images/icons/create_timer.png); }


.app-form { padding:0; margin:0;  position:relative;}
.app-form-container { height:423px; overflow: auto;  }
.app-form fieldset { border:medium none; padding-right:10px; padding-top:0.5em; background: url(../images/fieldset_splitter.png) no-repeat; margin:1em 0; }
.app-form fieldset.form-actions { margin:0; padding:0; width:100%; position:absolute; top:100%; height:30px; background:url("../images/canvas_toolbar_bg.png") repeat-x scroll 0 0 #161616; }

.app-form legend { font-size:0.9em; text-transform:uppercase; font-weight:bold; padding:1px 5px; padding-left:20px; margin:0 0 0 -15px; background:#222 url(../images/legend_arrow.gif) no-repeat 0 -18px; color:#aaa; cursor: pointer; -moz-border-radius: 3px; }
.app-form legend:hover { color:#FFF; }
fieldset.collapsed {  padding-top:0.5em; }
.collapsed legend { background-position:0 0!important; }
.collapsed .f-row { display: none!important; }

.app-form .f-row { padding:3px 10px 3px 5px; display:block;  }
.app-form .f-label { display:inline-block; padding:0 10px 0 0; text-align:right; vertical-align:middle; }
.app-form .f-inputs { display:inline-block; vertical-align:middle; width:100% }

.app-form .l-vertical .f-label { vertical-align:top; margin-top:3px; }
.app-form .f-checkboxes label { width:auto!important; padding:0; vertical-align:middle; margin:0!important; }
.app-form .f-checkboxes .label { padding:0 0 0 8px;  vertical-align:middle; }
.app-form .f-checkboxes input { margin:0; padding:0; }

.app-form  .milti-textboxes label { margin:0 0 0 15px!important; width:auto!important; }
.app-form input.date { background-image:url(../../../images/i_calendar_icon_mono.png); background-repeat:no-repeat; background-position:0 50%; padding-left:18px; }

.app-form .f-hint { padding-top:3px; font-size:0.8em; color:#555; }
.app-form .not-valid { background:#f5d6d6 url(../../../images/exclamation_red_16px.png) no-repeat 98% 50%; }
.app-form .not-valid .f-hint { color:#c33; }

.app-form .required-field { color:#900; }

.f-inputs .input-helper { display:inline-block; vertical-align:middle; line-height:13px; padding:4px; margin-left:0px; border:1px solid #CCC; }
.f-inputs .input-helper:hover { border-color:#c33; }

.textbox-wrap { display:inline-block; _display:inline; zoom: 100%: }
.textbox-wrap input { padding-left:18px; }

.app-form fieldset { padding-left:65px; position:relative; }
.app-form  .f-label { margin-left:-75px; width:65px; }

.app-form .form-buttons { padding-left:70px; }


.color-picker-box { display:inline-block; width:18px; height:18px; border:1px solid #FFF; vertical-align:middle; margin-left:5px; }
.color-picker-hint { display:inline-block; vertical-align:middle; font-style:italic; color:#999999; font-size:0.8em; margin-left:10px; }

.color-picker-wrapper {  width:208px; background:#333; margin:-5px; padding: 5px; border-bottom:1px solid #1a1a1a;  -moz-border-radius: 3px; -webkit-border-radius: 3px; -moz-box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.9); -webkit-box-shadow: rgba(0,0,0,0.9)  0px 1px 8px; }
.color-cell { border: 1px solid #111; display:block; float:left; width:14px; height:14px; }
.active-color, 
.color-cell-hover { border-color:#FFFFFF; cursor: pointer; }

.color-range-inputs input { margin-left:2px; text-align:center; }

.counter-text { position: relative; margin-top: -26px; margin-left:100px; width:auto; }
.counter-text .f-label { margin-left:0; width:auto;}
.counter-text .f-inputs { width:auto; }

.dhtml-menu-active { position:relative; z-index:1001; }

/* slider root element */
.slider { background:#DDD; display: inline-block; height:5px; position:relative; border:1px solid #333; border-color:#666 #FFF #FFF #666; width:180px;margin:8px 0; vertical-align:middle; }
.slider:hover { border-color:#3d7bad #a4c9e3 #a4c9e3 #3d7bad; }

/* progress bar (enabled with progress: true) */
.progress { height:100%; background-color:#979797; cursor:default; }
.slider:hover .progress { background-color:#93c0de;}

/* drag handle */
.handle {  background: url(../images/slider_knob.png) no-repeat; height:23px;width:12px; top:-8px; position:absolute; display:block; cursor:default; border:0 none; padding:0; margin:0; }
.handle:focus,
.handle:hover { background-position:0 -23px; outline:0 none!important; }

/* the input field */
input.range { border:0 none; background:transparent; color:#FFF; padding:2px 0; margin:0 0 0 5px; text-align:center; width:25px; float:right }
input.range:focus { background-color:#000; }


/* Genral stuff
------------------------------ */

#preloader,
#outdatedIE {  background:#222222 url(../images/app_bg.png); display:block; width:100%; height:100%; position:absolute; z-index:1000; top:0; left:0; text-align:center; display: none; }
#preloader .indicator { height:24px; line-height:24px; position:relative; top:50%; margin-top:-12px; margin:auto; display:inline-block; background:url(../images/ajax_loader_24px_333.gif) no-repeat; padding-left:34px; color:#FFFFFF; }

body.app-loading #preloader { display: block; }
body.app-loading { overflow: hidden; }

#outdatedIE .content { position:relative; top:48%; margin-top:-12px; font-size:1.5em; }

#appWrapper { width:970px; position:relative; margin:auto; top:10%; -margin-top: -312px; }



.app-header { height:70px; background:url(../images/top_bar_bg.png) repeat-x; margin-bottom:5px; overflow:hidden; line-height:70px; margin-bottom:5px; }
.app-header-content {  display:table-cell; vertical-align:middle; width:100%; height:100%; line-height:70px; }

#siteContent {background:#202020; margin-bottom:20px; }

.main-panel { float:left; }

.prop-panel { width:325px; height:510px; float:right; background:#222222 url(../images/prop_block_grad.png) repeat-x; position:relative; }


.starter-block { margin-bottom:15px; }
.starter-block h4 { font-size:0.9em; text-transform:uppercase; margin-bottom:5px; }

.app-footer { position:absolute; top:100%; width:100%; padding-top:20px; font-size:0.9em; line-height:1.25em; }


.hud-canvas { width:640px; height:480px; background:#222 no-repeat; position:relative; overflow:hidden; }



.canvas-1 .hud-canvas { background-image:url(../images/canvas_1.jpg); -background-image:url(../images/shot0000.png); }
.canvas-2 .hud-canvas { background-image:url(../images/canvas_2.jpg)}

#siteContent,
.app-header,
.main-panel,
.prop-panel { box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.75); -webkit-box-shadow: rgba(0,0,0,0.75)  0px 1px 3px; }

h1.logo { display:inline-block; width:187px; height:34px; margin:0 18px; background: url(../images/logo_v2.png) no-repeat; font-size:1em; vertical-align:middle; }
h1.logo span { display:none; color:#FFFFFF; }

.ql-logo { float:right; margin:14px 20px; }

.app-nav { float:right; list-style:none; }
.app-nav li { display: inline; margin-left:15px; }

.app-global-actions { display:inline-block; vertical-align:middle; background:url(../images/global_actions_sep.png) no-repeat 0 50%; padding-left:30px; margin-left:10px; }
.app-global-actions .counter { font:bold 22px/22px Arial, Helvetica, sans-serif; display:inline-block; }
.app-global-actions .hint { font-size:9px; text-transform:uppercase; line-height:1em; display:inline-block; text-align:left; color:#999999; }

.hud-elements,
.canvas-extras,
.canvas-extras * { position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; }

.hud-elements { position:relative; color:#FFF; }

.hud-weapon {  }
.gun-1 .hud-weapon { background:url(../images/canvas_weapon.gif) no-repeat; }

.gun-2 .hud-weapon { background:url(../images/canvas_weapon_2.gif) no-repeat; }

.hud-crosshair { background:url(../images/corsshair.png) no-repeat; }

.weapon-bar { background-repeat:no-repeat; }
.wbar-0 .weapon-bar { display:none; }
.wbar-1 .weapon-bar { background-image:url(../images/wbar_1.png); }
.wbar-2 .weapon-bar { background-image:url(../images/wbar_2.png); }
.wbar-3 .weapon-bar { background-image:url(../images/wbar_3.png); }
.wbar-4 .weapon-bar { background-image:url(../images/wbar_4.png); }

.team-overlay { background:url(../images/team_overlay_red.png) no-repeat right top; display:none; }
.teamoverlay-1 .team-overlay { display:block; }
.teamoverlay-2 .team-overlay { display:block; background-position: 100% 392px; }

.hud-canvas .visual-extras { display:none; }
.hud-canvas:hover .-visual-extras { display:block; }
.visual-extras { position:absolute; bottom:10px; right:10px; padding:15px; border:1px solid rgba(255,255,255,0.1);  -moz-box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.95); opacity: 0.9; background:#000; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }

.grid-5  .hud-elements { background-image:url(../images/grid_5px.png); }
.grid-10 .hud-elements { background-image:url(../images/grid_10px.png); }

.lag-o-metr { background:url(../images/lagometr.gif) no-repeat; display: none; }
.speed-o-metr { background:url(../images/speedometr.gif) no-repeat; display:none; }
.pickup-message { background:url(../images/pickup_message.png) no-repeat; display:none; }
.demo-rec-message { background:url(../images/demo_recording_message.png) no-repeat; display:none; }

.draw-lag .lag-o-metr,
.draw-speed .speed-o-metr,
.draw-pickup .pickup-message,
.draw-demo-rec .demo-rec-message { display:block; }
					
.app-toolbar { height:30px; background:#161616 url(../images/canvas_toolbar_bg.png) repeat-x; list-style:none; font-size:10px; text-transform:uppercase; }
.app-toolbar li { display:block; float:left; border-right:1px solid #333; position:relative; line-height:30px; padding:0 15px; cursor: pointer; white-space:nowrap; }

.app-toolbar li .item-name { color:#CCC; margin-right:0px; opacity: 0.75; }
.app-toolbar li .item-value { font-weight:normal; color:#FFF; display:inline-block; width:16px; text-align:right; }

.app-toolbar li.item-status .item-name { color:#AAA; margin-right:5px; }
.app-toolbar li.item-status { font-weight:normal; color:#FFF; display:inline-block; width:auto; text-align:right; }

.app-toolbar li:hover .item-name { color:#CCC; opacity: 1; }

.app-toolbar li.active { background:#323232 url(../images/canvas_toolbar_bg.png) repeat-x 0 -45px;  color:#CCC; }

.app-toolbar li ul { position:absolute; left:0; bottom: 29px;  min-width:100%; display:none; }
.app-toolbar li.active ul { display:block; -moz-box-shadow: 0px -1px 3px rgba(0, 0, 0, 0.95); -webkit-box-shadow: 0px -1px 3px rgba(0, 0, 0, 0.95);}

.app-toolbar ul li { float:none; border:0 none; line-height:1; padding:0; border-bottom: 1px solid #3d3d3d; background:#141414;}
.app-toolbar ul input { width:13px; height:13px; vertical-align:middle; margin:0; padding:0; margin-right:5px;}
.app-toolbar ul label { display:inline-block; line-height:30px; padding:0 15px;  vertical-align:middle;}
.app-toolbar ul label span { cursor: pointer;  vertical-align:middle; color:#666666;}
.app-toolbar ul label:hover span { color:#FFF; }

.app-toolbar li.grid-toggle { float: right; border:0 none; border-left:1px solid #333; }
.app-toolbar li.grid-toggle .item-name { display:inline-block; width:16px; height:30px; background:url(../images/btn_ico_grid.png) no-repeat 0 50%; text-indent:-10000px; }
.app-toolbar li.grid-toggle .item-value { margin-left:-4px; }
.app-toolbar li.grid-toggle ul { }

.app-toolbar li.grid-snap { float: right; border:0 none; border-left:1px solid #333;  }
.app-toolbar li.grid-snap .item-name { display:inline-block; width:16px; height:30px; background:url(../images/btn_ico_snap.png) no-repeat 0 50%; text-indent:-10000px;}
.app-toolbar li.grid-snap .item-value { margin-left:-4px; }
.app-toolbar li.grid-snap ul {  }

.app-toolbar li.shot-toggle { float: right; border:0 none; border-left:1px solid #333; }

.app-toolbar li.shot-toggle .item-name { display:inline-block; width:16px; height:30px; background:url(../images/btn_ico_shot.png) no-repeat 0 50%; text-indent:-10000px; }
.app-toolbar li.shot-toggle .item-value { display: none}
.app-toolbar li.shot-toggle ul {  right:0; left:auto; }

.app-toolbar li.trash { float:right; border:0 none; border-left:1px solid #333; }
.app-toolbar li.trash .item-name {  display:inline-block; width:16px; height:30px; background:url(../images/btn_ico_trash.png) no-repeat 0 50%; text-indent:-10000px; }
.app-toolbar li.trash .item-value { display: none}

.app-toolbar li.load { float:right; border:0 none; border-left:1px solid #333; }
.app-toolbar li.load .item-name {  display:inline-block; width:16px; height:30px; background:url(../images/btn_ico_load.png) no-repeat 0 50%; text-indent:-10000px; }

.app-toolbar li.bug { float:right; border:0 none; border-left:1px solid #333; }
.app-toolbar li.bug .item-name {  display:inline-block; width:16px; height:30px; background:url(../images/btn_ico_bug.png) no-repeat 0 50%; text-indent:-10000px; }

.app-toolbar li.switch-large { }
.app-toolbar li.switch-large .item-name {  display:inline-block; width:16px; height:30px; background:url(../images/btn_ico_large.png) no-repeat 0 50%; text-indent:-10000px; }
.app-toolbar li.switch-compact { display:none; }
.app-toolbar li.switch-compact .item-name {  display:inline-block; width:16px; height:30px; background:url(../images/btn_ico_compact.png) no-repeat 0 50%; text-indent:-10000px; }


.app-form .app-toolbar li  { padding:0 7px; }

.app-toolbar li.align-controls .item-name { background-image:url(../images/icons/align_icons_sprite.png); display:inline-block; width:16px; height:30px; text-indent:-10000px;} 

.app-toolbar li.align-top .item-name { background-position:-4px 50%;}
.app-toolbar li.align-vertical .item-name { background-position: -28px 50%; }
.app-toolbar li.align-bottom .item-name { background-position: -52px 50%;}
.app-toolbar li.align-left .item-name { background-position: -76px 50%; }
.app-toolbar li.align-horizontal .item-name { background-position: -100px 50%;}
.app-toolbar li.align-right .item-name { background-position: -124px 50%; }

.app-toolbar .player-status ul { }

.app-toolbar .player-status ul li { line-height:normal; }
.app-toolbar .player-status .f-inputs { display: inline-block; vertical-align: middle; width: 100%; }
.app-toolbar .player-status .f-row { display: block; padding: 5px 15px; }

.app-toolbar .player-status .handle {
 height: 23px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    width: 12px;	
}

.app-toolbar .player-status input.range {
    height: 16px;
    margin: 0 5px 0 0;
    padding: 0;
    vertical-align: middle;
	margin: 0 0 0 5px;
    padding: 2px 0;
    text-align: center;
    width: 25px;
	float: none;
}

.app-toolbar .player-status .f-label { display:inline-block; vertical-align:middle; width:50px; }
.app-toolbar .player-status .slider { width:180px; }

.app-toolbar a.set-custom-bg { display: inline-block; line-height: 30px; padding-left: 38px; background: url(../images/btn_ico_import.png) no-repeat 13px center; text-decoration: none; color:#666; }
.app-toolbar a.set-custom-bg:hover { color: #FFF; }

.app-toolbar ul li.disabled-item label span { color: #444; cursor: auto; }

li.hud-extras ul {  }
li.hud-extras .item-value { display: none}

li.draw-gun ul { width:100px; }

.hud-item-box { overflow: hidden; position:relative; background-color:rgba(255,255,255,0.25); width:100%; height:100%; }
.resize-handle { width:5px; height:5px; right:5px; bottom:5px; border:1px solid #AAA; position:absolute; cursor:nw-resize; display:none; }

.hud-item-box .h-bar { width:100%; height:100%; }
.ltr-bar .h-bar {}
.rtl-bar .h-bar { float:right; }

body.resize .selected .hud-item-box { visibility:hidden; }

.resize-handle.nw { cursor:nw-resize; top:-4px; left:-4px; }
.resize-handle.n { cursor:n-resize; top:-4px; left:50%; margin-right:-4px; }
.resize-handle.ne { cursor:ne-resize; top:-4px; right:-4px; }
.resize-handle.e { cursor:e-resize; right:-4px; top:50%; margin-top:-4px; }
.resize-handle.se { cursor:se-resize; bottom:-4px; right:-4px; }
.resize-handle.s { cursor:s-resize; bottom:-4px; left:50%; margin-top:-4px; }
.resize-handle.sw { cursor:sw-resize; bottom:-4px; left:-4px; }
.resize-handle.w { cursor:w-resize; top:50%; left:-4px; margin-top:-4px; }

body.resize .resize-handle,
.hud-item:hover .resize-handle { display:block; border-color:#FFF; }

body.draw .resize-handle,
body.drag-select .resize-handle { display:none!important; }

.selected .hud-item-box { top:0; left: 0; }

.hud-item { position:absolute; vertical-align:baseline; cursor:move; }
body.drag .hud-item,
.selected,
body.draw .hud-item,
.hud-item:hover { border:1px dotted #AAA; padding:4px; margin:-5px; }

.rubber-box { padding:0!important; margin:0!important; border:1px solid #3399ff!important; background: rgba(51, 153, 255, 0.3); }

.hud-item.drag-start { border-color:#FFF; }

.item-icon { display: inline-block; vertical-align:middle; margin:auto; }
.item-icon img { width:100%; height:100%; }

.item-counter {  display: inline-block; font-family:Aero; letter-spacing:-0.05; font-size:3.9em; vertical-align:middle; text-align:center; }
.item-counter span.textstyle-2 { text-shadow:1px 1px 0px #000;}
.item-counter span.textstyle-3 { text-shadow:2px 2px 0px #000;}

.accuracy .item-counter { text-align:left; }

.icon-top .item-counter { display:block; margin:auto; }
.icon-top .item-icon { display:block; }

.obit-item { height:15px; }
.obit-item .item-icon { margin:0 2px; width:15px; height:15px; display:block; float:left; }
.obit-item .item-counter { line-height:15px; display:block; float:left;}
.obit-item .item-counter span.counter { font-size:22%; line-height:15px; }

.scorebox-item.style-0 .team-red { width:180px; height:35px; background:url(../images/scorebox_classic.png) no-repeat; margin:0!important; }
.scorebox-item.style-0 .team-blue { display:none!important; }
.team-score.style-0 .team-red { background-image:url(../images/scorebox_classic_tdm.png); }

.scorebox-item.style-1 .team-red { width:150px; height:35px; background:url(../images/scorebox_classic_2.png) no-repeat; margin:0!important; }
.scorebox-item.style-1 .team-blue { display:none!important; }
.team-score.style-1 .team-red { background-image:url(../images/scorebox_classic_2_tdm.png); }


.scorebox-item .item-icon { width:50px; height:16px; background-repeat:no-repeat; }

.ffa-score .team-red { background-image:url(../images/scorebox_red_ffa.png); }
.ffa-score .team-blue { background-image:url(../images/scorebox_blue_ffa.png); }

.team-score .team-red { background-image:url(../images/scorebox_red_tdm.png); }
.team-score .team-blue { background-image:url(../images/scorebox_blue_tdm.png); }

.scorebox-vertical .item-icon { display:block; }

.powerups-wrapper { position: relative; }

.powerup-item { display:inline-block; white-space:nowrap; }
.powerup-item .item-icon,
.powerup-item .item-counter { vertical-align: baseline; }
.powerup-item .item-counter span.counter { text-shadow:none; }

.powerup-item:last-child { position:absolute; top:0; left:100%; }
.stack-right .powerup-item:last-child { right:100%; left:auto; }
.stack-top .powerup-item:last-child { top:100%; left:0; }
.stack-bottom .powerup-item:last-child { bottom:100%; top: auto; left:0; }

.single-powerup .powerup-item { margin:0!important; }
.single-powerup .powerup-item:last-child { display:none; }

.skill-item .item-counter { letter-spacing: 0.025em; word-spacing: -0.06em; }

.chat-area { }
.chat-messages { position:absolute; bottom: 1px; list-style:none; line-height:10px; font-size:10px; opacity: 0.9; }
.chat-messages li { margin-top:3px; display:none; font-family:Aero;  text-shadow:1px 1px 0px #000; padding-left:3px; letter-spacing: 0.1em; }
.chat-messages .name { margin-right: 5px; }
.chat-messages .message { color: #00d800; }

.chat-messages li:last-child,
.chat-visible .chat-messages li { display:block; }
.chat-area .hud-item-box { overflow:visible; }
.chat-invisible  .hud-item-box { background: transparent!important; }

.chat-messages li.message-2,
.chat-messages li.message-4,
.chat-messages li.message-5 { padding-left:0; }

.chat-messages li.message-4 .name,
.chat-messages li.message-5 .name { display:none; }

.library-items { list-style:none; }
.library-items li { cursor: move; display:block; float:left; margin:0 8px 8px 0; border:1px solid #333;  width:47px; height:47px; background-position:center center; background-repeat:no-repeat;  -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }

.library-items li:hover { background-color:#292929; border-color:#131313 #1e1e1e #2d2d2d; }

.library-items li.active { background-color:#292929; border-color:#131313 #1e1e1e #2d2d2d; }

.library-items li.disabled,
.library-items li.drag-start { opacity: 0.25; }

.lib-element-health { background-image: url(../images/icons/create_health.png); }
.lib-element-armor { background-image: url(../images/icons/create_armor.png); }
.lib-element-ammo { background-image: url(../images/icons/create_ammo.png); }
.lib-element-ctf-powerup { background-image: url(../images/icons/create_ctf_powerup.png); }
.lib-element-obit { background-image: url(../images/icons/create_obit.png); }
.lib-element-player-item { background-image: url(../images/icons/create_player_item.png); }
.lib-element-powerup { background-image: url(../images/icons/create_powerup.png); }
.lib-element-scorebox { background-image: url(../images/icons/create_scorebox.png); }
.lib-element-timer { background-image: url(../images/icons/create_timer.png); }
.lib-element-flag { background-image: url(../images/icons/create_flag.png); }
.lib-element-rect { background-image: url(../images/icons/create_rect.png); }
.lib-element-hbar { background-image: url(../images/icons/create_healthbar.png); }
.lib-element-abar { background-image: url(../images/icons/create_armorbar.png); }
.lib-element-acc { background-image: url(../images/icons/create_accuracy.png); }
.lib-element-skill { background-image: url(../images/icons/create_skill.png); }

.lib-element-chat { background-image: url(../images/icons/create_chat.png); }

.library-items li .item-name { display:none; }

.icons-24px li { width:22px; height:22px; cursor: pointer; margin:0 2px 0 0;  } 
.icons-32px li { width:30px; height:30px; cursor: pointer; margin:0 2px 0 0;  } 

.align-controls li { background-image:url(../images/icons/align_icons_sprite.png);} 
.align-controls li.align-top { background-position:0 0;}
.align-controls li.align-vertical { background-position: -24px 0; }
.align-controls li.align-bottom { background-position: -48px 0;}
.align-controls li.align-left { background-position: -72px 0; }
.align-controls li.align-horizontal { background-position: -96px 0;}
.align-controls li.align-right { background-position: -120px 0; }


.arrange-controls li { background-image:url(../images/icons/arrange_icons_sprite.png);} 
.arrange-controls li.bring-front { background-position:-1px -1px;}
.arrange-controls li.send-back { background-position: -25px -1px; }
.arrange-controls li.send-backward { background-position: -49px -1px;}
.arrange-controls li.bring-forward { background-position: -73px -1px; }


#drawControls { }
#drawControls li.draw-line { background-image:url(../images/draw_line_icon.png); }
#drawControls li.draw-rect { background-image:url(../images/draw_rect_icon.png); }

#presetManager { position:absolute; left:0; bottom:0; padding:0px; width:100%; }

#presetManager li.load ul { width:auto; right:0; left:auto; }
#presetManager li ul li { border-color:#222; }
#presetManager li ul li a { line-height:26px; padding:0 15px; text-decoration: none; display:block; white-space:nowrap; }

.drag-helper { z-index:1000; width:47px; height:47px; border:1px dotted #CCC; background-repeat:no-repeat; background-position:center center; }

.new-item-drag .hud-canvas { outline:2px solid #FFF; }
.new-item-drop-over { outline-color:#0099cc!important; }

.hint-wrapper { }
.hint-body { background:#000; margin:auto; -moz-border-radius: 3px; -webkit-border-radius: 3px; -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.75); -webkit-box-shadow: rgba(0,0,0,0.5)  0px 1px 3px; overflow:hidden; }
.hint-body small { font-size:0.8em; color:#AAA; display:block; padding-bottom:4px; }
.hint-content { padding:7px 14px; color:#CCCCCC; text-align:center;  }
.hint-corner { width:0; height:0; margin:auto; border:4px solid #333; border-color:#000 transparent transparent transparent; border-bottom-width:0; }


/* Growl Messages
---------------------------------*/
.growl-message-container { width:35%; min-width:250px; }
.growl-message-wrapper { overflow:hidden; margin:0; color:#FFFFFF; width:100%;  }
.growl-message { background:#333; background:rgba(51, 51, 51, 0.9); margin:3px; background-repeat:repeat-x; background-image:url(../images/growl_msg_bg.png); border-bottom:1px solid #1a1a1a;   -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.8); -webkit-box-shadow: rgba(0,0,0,0.8)  0px 1px 3px;  }
.growl-message a.close-message { display:block; width:17px; height:13px; float:right; margin:4px; background:url(../images/close_tm.gif) no-repeat; opacity: 0.8; }
.growl-message a.close-message:hover { opacity: 1; }
.growl-message .message { padding:12px; padding-top:7px; text-align: left;  }
.growl-message h4 { font-size:1.2em; margin-bottom:5px; color:#FFF; line-height:25px; height:25px; display:block; background-image:url(../images/growl_icons.png); background-repeat:no-repeat; background-position:0 0; padding-left:22px; }

.growl-message .weak { color: #ffd1d1; }

.error .growl-message {background-color:#993333; background-color:rgba(153, 51, 51, 0.9); border-color:#8c2f2f; }
.error .growl-message h4 { background-position:0 -54px; }
.warning .growl-message {background-color:#cc6600; background-color:rgba(204, 102, 0, 0.9);  border-color:#ba5d00; }
.warning .growl-message h4 { background-position:0 -27px; } 

.success .growl-message {background-color:#477412; background-color:rgba(71, 116, 18, 0.9); border-color:#3b5e0e;}
.success .growl-message h4 { background-position:0 -81px; }

.top-left .growl-message-wrapper { margin-bottom:1px;}
.top-left .growl-message { }
.top-right .growl-message-wrapper { margin-bottom:1px; float:right;} 
.top-right .growl-message { }

.bottom-left .growl-message-wrapper { margin-top:1px;}
.bottom-left .growl-message { float:left; }
.bottom-right .growl-message-wrapper { margin-top:1px;}
.bottom-right .growl-message { float:right; }

div.ajax-loader .growl-message a.close-message { display:none; }
div.ajax-loader .growl-message { background:#333 url(../images/ajax_loader_16px_333.gif) no-repeat 8px center; border:0 none; }
div.ajax-loader .growl-message .message { padding:8px 8px 8px 32px; text-transform:uppercase; font-size:10px; color:#CCCCCC;}

.error-details li { margin-bottom:0.25em; }
.error-details li span.weak { display:inline-block; margin-right:10px; width:30px; }

/* Modal Windows
---------------------------------*/

.xpk-mwindow-wrap { margin:auto; background:#FFF; box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.9); -moz-box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.9);	-webkit-box-shadow: rgba(0,0,0,0.9)  0px 2px 12px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.xpk-mwindow-content { padding:5px;}

.xpk-win-wrapper { margin: auto; position: relative; }

.xpk-win-show { overflow:hidden!important; }

.xpk-win-show .xpk-win-head h4,
.xpk-win-show .xpk-close-button,
.xpk-win-show .xpk-win-content { display: none !important; }

.xpk-win-head { background:#b0c3ce url(../images/modal_window/sprite_1.png) repeat-x 0 -126px;  display:block; line-height:1em;  padding:0; width:100%; zoom: 1; height:35px; border-bottom:1px solid #96a9b4; }
.xpk-win-head .xpk-win-title { float:left; font-size:1.2em; line-height:35px; margin:0; padding:0 15px; color:#333; zoom: 100%; white-space:nowrap; overflow:hidden; text-overflow: ellipsis; height:35px; width:85%; text-shadow:0px 1px 0px rgba(255,255,255,0.75); font-weight:bold;}

.xpk-win-head .xpk-close-button { border: 0 none; background:transparent; font: 10px/10px Tahoma; float:right; width:19px; height:16px; background: url(../images/modal_window/sprite_1.png) no-repeat 0px -162px; text-indent:-10000px; cursor: pointer; margin:3px 0 0; }
.xpk-win-head .xpk-close-button:hover { background-position:0px -178px; }
.xpk-win-content { padding:15px; color:#333; } 
.xpk-win-content a { color:#069; }
.xpk-win-content p { margin-bottom:0.5em; }
.xpk-win-loading { height:50px; background:url(../images/ajax_loader_16px.gif) no-repeat center; }

.xpk-window-preloader { position:absolute; top:0; left:0; width:100%; background:#FFF url(../images/ajax_loader_16px_fff.gif) no-repeat center center; }

.modal-input-450 { width:412px; }
.modal-input-550 { width:512px; }
.modal-input-750 { width:712px; }

.ajax__calendar_container { z-index: 100 }
.ajax__calendar td { padding:0!important; }

.build-meta { font-size: 0.8; color:#FFFFFF; }

.mwin-form-layout { width:100%; }
.mwin-form-layout td { padding:5px; }

#dimScreen,
#_exposeOverlay {  background:#222222 url(../images/app_bg.png); }

.xpk-win-content fieldset { background:none; padding-left:70px; margin:0; }
.xpk-win-content .f-label { margin-left:-80px; width:70px; }
.xpk-win-content input,
.xpk-win-content select,
.xpk-win-content textarea { padding:5px; border:1px inset #CCC; width:90%; }

#importHUDForm fieldset { padding:0 0 0 50px;  }
#importHUDForm .f-label { margin-left:-60px; width:50px; }
#importHUDForm select { width:50%; }
#importHUDForm select optgroup { font-style:normal; font-family:Tahoma, Arial, Helvetica, sans-serif }
#importHUDForm textarea { width:99%; }

#editRangesForm input { width:80px; margin-right:5px; text-align:center }

.xpk-win-content .info-block { margin-left:-15px; margin-right:-15px; margin-top:-10px; }

.warn-block, 
.info-block { padding:15px;  -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; }

.warn-block { background-color:#f5d6d6; }
.info-block { background-color:#e0ebd6; }

/* docked layout */
body.docked-panel .prop-panel { opacity: 1; border-width: 0 0 0 1px; height:990px; top: 0; left:auto; right:0; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none;}
body.docked-panel .app-form { height:960px;  }
body.docked-panel .app-form-container { height:903px; }
body.docked-panel .fn-wrapper { position:relative; }
body.docked-panel .control-header { cursor: default; }

.xpk-win-content .app-form { height:auto!important;  }
